<template>
    <s-box title="热词云图" ref="loading" >
        <div class="trend-time"  slot="header">
            <Select class="select-top" v-model="category" @on-change="_initChart">
                <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
        </div>
        <div class="chart-box">
             <div class="chart-wrap" ref="chart"></div>
        </div>
    </s-box>
</template>
<script>
import delegate from '../js/event.js';
import echarts from "echarts";
import mixin from '../js/mixin.js';
export default {
    mixins:[mixin],
    data() {
        return {
            category:'all',
            cityList: [
                {
                    value: 'all',
                    label: '综合'
                },
                {
                    value: 'news',
                    label: '新闻动态'
                },
                {
                  value: 'paper',
                  label: '论文'
                },
                {
                  value: 'patent',
                  label: '专利'
                },
            ],
            hotwords:[]
        }
    },
    mounted(){
        this._initMethod();
    },
    beforeDestroy(){
         // 解除事件绑定
         delegate.$off('s-resize',this._initChart)
         delegate.$off('s-search',this._serach)
    },
    methods: {
        _initMethod() {
            delegate.$on('s-search',this._serach)
            delegate.$on('s-resize',this._initChart)
        },
        _serach(){

        },
        change(){
            this._initChart();
        },
        _getkHotwordDevelopTrends(){
            if(!this.navCurrentId) return;
                    this.legends = [];
                    this.series = [];
                    this.year = [];
                    this.api({
                            url: "newtechanalyse/getHotwords",
                            method: "post",
                            data:`topicId=${this.navCurrentId}${this.category == 'all' ? '': '&category='+this.category }`
                    }).then(data => {
                        this.$refs.loading.hide();
                        let hotwords = [];
                        data.forEach((item)=>{
                          hotwords.push({
                            name: item.keyword,
                            value: item.weight,
                            // Style of single text
                            textStyle: {
                              normal: {},
                              emphasis: {}
                            }
                          })
                        });
                        this.hotwords = hotwords;
                        this._setChartOption();
                    }).catch((error) =>{ this.$refs.loading.hide()})
        },
        _setChartOption(){
            let myChart = echarts.init(this.$refs.chart);
                myChart.clear();
                myChart.setOption({
                  series: [{
                    type: 'wordCloud',

                    // The shape of the "cloud" to draw. Can be any polar equation represented as a
                    // callback function, or a keyword present. Available presents are circle (default),
                    // cardioid (apple or heart shape curve, the most known polar equation), diamond (
                    // alias of square), triangle-forward, triangle, (alias of triangle-upright, pentagon, and star.

                    shape: 'circle',

                    // A silhouette image which the white area will be excluded from drawing texts.
                    // The shape option will continue to apply as the shape of the cloud to grow.

                    //  maskImage: maskImage,

                    // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
                    // Default to be put in the center and has 75% x 80% size.

                    left: 'center',
                    top: 'center',
                    width: '70%',
                    height: '80%',
                    right: null,
                    bottom: null,

                    // Text size range which the value in data will be mapped to.
                    // Default to have minimum 12px and maximum 60px size.

                    sizeRange: [20, 40],

                    // Text rotation range and step in degree. Text will be rotated randomly in range [-90, 90] by rotationStep 45

                    rotationRange: [0, 0],
                    rotationStep: 45,

                    // size of the grid in pixels for marking the availability of the canvas
                    // the larger the grid size, the bigger the gap between words.

                    gridSize: 8,

                    // set to true to allow word being draw partly outside of the canvas.
                    // Allow word bigger than the size of the canvas to be drawn
                    drawOutOfBound: false,

                    // Global text style
                    textStyle: {
                      normal: {
                        fontFamily: 'sans-serif',
                        fontWeight: 'bold',
                        // Color can be a callback function or a color string
                        color: function () {
                          // Random color
                          return '#09a596';
                        }
                      },
                      emphasis: {
                        shadowBlur: 10,
                        shadowColor: '#333'
                      }
                    },

                    // Data is an array. Each array item must have name and value property.
                    data: this.hotwords
                  }]
                });
        },
        _initChart() {
            this.$refs.loading.show();
            this._getkHotwordDevelopTrends();
        }
    },
}
</script>
<style lang="scss" scoped>
  .chart-box{
      position: relative;
      padding-top: 48.8%;
  }
  .chart-wrap{
      position: absolute;
      top: 5px;
      left: 0;
      right: 0;
      bottom: 0;
  }

</style>

